<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">二手车购买详情页</el-breadcrumb-item>
            <el-breadcrumb-item></el-breadcrumb-item>
        </el-breadcrumb>
        <!--<iframe src="../../../xfy/index.html" width="100%" height="100%" frameborder="0" scrolling="auto"style="position:absolute;top: 0px;left: 0px;"></iframe>-->

        <!--{{listData}}-->

        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="10">
                <div>
                    <img :src="listData[0].img"
                         style="width: 350px;height: 350px">
                </div>

            </el-col>
            <el-col :span="6">
                <div class="right_box">
                    <el-form label-width="120px" :model="orderForm">
                        <div class="bigPic">
                            <h3>{{listData[0].name}}</h3>
                            <div>
                                <p><span>惊 爆 价：</span> <sub>￥</sub>{{listData[0].price}}</p>
                                <p>
                                    优 惠：
                                    <span>满200减10</span>
                                    <span>满400减30</span>
                                </p>
                                <p>
                                    商 品 描 述 ：
                                    <span>{{listData[0].desc}}</span>
                                </p>
                            </div>
                            <div>
                                数量：
                                <el-input-number v-model="orderForm.number" @change="handleChange" :min="1" :max="10"
                                                 label="描述文字"></el-input-number>
                            </div>

                            <el-input size="small" v-model="orderForm.byloginid" v-show="false"></el-input>
                            <el-date-picker type="datetime" v-model="orderForm.createtime"  v-show="false"/>
                            <el-input size="small" v-model="orderForm.bycarid" v-show="false"></el-input>
                            <el-input size="small" v-model="orderForm.price" v-show="false"></el-input>
                            <el-input size="small" v-model="orderForm.total" v-show="false"></el-input>

                            <div>
                                <el-button type="success" plain style="position:relative; bottom:-40px;right: -100px;"
                                           @click="buyer()">立即購買
                                </el-button>
                            </div>
                        </div>

                    </el-form>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light"></div>
            </el-col>

        </el-row>


    </div>


</template>

<script>
    // import { deptList, deptSave, deptDelete } from '../../api/userMG'
    export default {
        data() {
            return {
                listData: [
                    {
                      car: []
                    }
                ], //二手车数据


                orderForm: {
                    byloginid: JSON.parse(localStorage.getItem('loginUser')).id,
                    bycarid: this.$route.query.id,
                    createtime: new Date(),
                    number: 1,
                    price: 0,
                    total: 0
                },


                dialogImageUrl: '',
                dialogVisible: false,

            }
        },
        created() {


        },
        mounted() {
            this.getdata();

        },

        filters: {
            // 图片预览过滤
            filterImg(item) {
                if (typeof item === "string") {
                    return item.split("|");
                } else {
                    return item
                }
            },
        },

        /**
         * 里面的方法只有被调用才会执行
         */
        methods: {

            // 获取公司列表
            getdata() {
                // 表格加载开始
                const _this = this;

                let id = this.$route.query.id;

                let res;
                axios.get(localStorage.getItem("globalUrl") + "car/findAllById?id=" + id).then(function (resp) {

                    _this.listData = resp.data.data;

                    _this.orderForm.price = resp.data.data[0].price;


                    // 表格加载结束
                    _this.loading = false
                });

            },

            //购买
            buyer() {

                const _this = this;
                this.orderForm.createtime = new Date();

                axios.post(localStorage.getItem("globalUrl") + "order/add",this.orderForm).then(function(resp){

                    // 购买成功，跳转成功页面
                    _this.$router.push('/success');

                });





            },



            // 输入框
            handleChange(value) {

                this.orderForm.total = this.orderForm.number * this.orderForm.price;
            },

        }
    }
</script>



